<template>
  <div>
    <div class="main" v-for="(v,i) in arr" :key="i">
      <div class="main-one" >
        <img src="../../images/friendcircle-banner.png" alt="" />
        <div class="title">
          <p class="title-one">{{v.name}}</p>
          <P class="title-two">{{v.title}}</P>
        </div>
      </div>
      <div class="nav">
        <img src="../../images/friendcircle-banner.png" alt="" />
        <span>{{v.titlt}}</span>
      </div>
      <div class="xin">
        <van-icon name="like-o" /> <span>{{v.nume}}</span>
        <van-icon name="chat-o" class="pinglun" /><span>评论</span>
      </div>
      <div class="time">{{v.time}}小时前</div>
      <div class="renwu">
        <div class="renwu-one">
          <span class="renwu-one-1">秋香：</span>
          <span class="renwu-one-2">赞~</span>
        </div>
      </div>
      <hr class="hr" />
    </div>
    
  </div>
</template>

<script>
export default {
    data(){
        return{
           arr:[
            {name:"零度1",title:"滴滴出行。出行无忧1",titlt:"滴滴出行。从此出行再无忧1",num:"1",time:"1"},
            {name:"零度2",title:"滴滴出行。出行无忧2",titlt:"滴滴出行。从此出行再无忧2",num:"2",time:"2"},
            {name:"零度3",title:"滴滴出行。出行无忧3",titlt:"滴滴出行。从此出行再无忧3",num:"3",time:"3"},
            {name:"零度4",title:"滴滴出行。出行无忧4",titlt:"滴滴出行。从此出行再无忧4",num:"4",time:"4"},
            {name:"零度5",title:"滴滴出行。出行无忧5",titlt:"滴滴出行。从此出行再无忧5",num:"5",time:"5"}
           ],
           arr1:[
            {user1:"秋霞",neirong:"赞~"},
            {user1:"秋霞",neirong:"赞~"},
            {user1:"秋霞",neirong:"赞~"},
            {user1:"秋霞",neirong:"赞~"},
            {user1:"秋霞",neirong:"赞~"},
           ]
        }
    }
};
</script>

<style scoped>
.main {
  width: 90%;
  margin: 0 auto;
}
.main-one {
  display: flex;
  margin-top: 16px;
}
.main-one > img {
  width: 40px;
  height: 40px;
  border-radius: 4px;
}
.title {
  margin-left: 8px;
}
.title-one {
  font-size: 15px;
  font-weight: 700;
  color: #41454d;
}
.title-two {
  font-size: 14px;
  color: #41454d;
  margin-top: 2px;
}
.nav {
  height: 52px;
  background-color: gray;
  margin-left: 50px;
}
.nav > img {
  width: 40px;
  height: 40px;
  vertical-align: middle;
}
.nav > span {
  line-height: 52px;
}
.xin {
  margin-left: 50px;
}
.pinglun {
  margin-left: 20px;
}
.time {
  margin-left: 50px;
  font-size: 12px;
  color: #acb1b7;
}
.renwu {
  margin-left: 50px;
}
.renwu-one-1 {
  font-size: 14px;
  color: #5bafff;
}
.renwu-one-2 {
  font-size: 14px;
  color: #41454d;
}
hr {
  margin-top: 16px;
}
</style>